<template>
  <div id="AlarmCategory">
    <el-card style="padding: 10px">
      <!-- 搜索条件 -->
      <el-form inline size="mini" :model="query" ref="ruleForm">
        <el-form-item label="严重性" prop="severity">
          <el-select
            v-model="query.severity"
            placeholder="请选择严重性"
            style="margin-right: 10px"
            size="mini"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始日期" prop="startTime">
          <el-date-picker
            v-model="query.startTime"
            type="date"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm"
            placeholder="选择开始日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="endTime">
          <el-date-picker
            v-model="query.endTime"
            type="date"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm"
            placeholder="选择结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            class="ml10"
            size="mini"
            type="primary"
            @click="getListData"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="resetForm('ruleForm')"
            >重置</el-button
          >
        </el-form-item>
        <el-form-item>
          <downLoadExcel
            :json_fields="fields"
            name="告警分类报表"
            :json_data="tableData"
          />
        </el-form-item>
        <!-- <el-form-item>
                    <el-button class="ml10" size="mini" :disabled="multiple">导出</el-button>
                </el-form-item> -->
      </el-form>
      <!-- 列表 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        :cell-style="cellStyle"
        height="calc(100vh - 250px)"
      >
        <!-- <el-table-column type="selection" width="50" align="left" /> -->
        <el-table-column
          show-overflow-tooltip="ture"
          prop="severity"
          align="center"
          label="严重性"
        >
          <template slot-scope="scope">
            <el-tag type="danger" size="mini">{{
              scope.row.severity | getSeverity
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="告警标题"> </el-table-column>
        <el-table-column prop="ip" label="对象IP"> </el-table-column>
        <el-table-column prop="beginTime" label="告警时间"> </el-table-column>
        <el-table-column prop="warnTime" label="告警时长">
          <template slot-scope="scope">{{
            scope.row.warnTime | getTime
          }}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="Detail(scope.row, scope.index)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {
  getAlarmCategoryApi, //告警管理列表查询
} from "@/api/dataPresentation/alarmCategory.js";
import downLoadExcel from "@/components/downLoadExcel/downLoadExcel";
export default {
  components: {
    downLoadExcel,
  },
  data() {
    return {
      //下拉
      options: [
        {
          value: 0,
          label: "未分类",
        },
        {
          value: 1,
          label: "信息",
        },
        {
          value: 2,
          label: "警告",
        },
        {
          value: 3,
          label: "一般严重",
        },
        {
          value: 4,
          label: "严重",
        },
        {
          value: 5,
          label: "灾难",
        },
      ],
      // 数据条数
      total: 0,
      //分页数据
      query: {
        severity: null, //严重级别
        // name: null, //问题
        startTime: null,
        endTime: null,
      },
      multipleSelection: [], //多选
      multiple: true, //控制导出按钮disabled
      tableData: [],
      //导出的字段
      fields: {
        严重性: "severity",
        告警标题: "name",
        对象IP: "ip",
        状态: "status",
        告警时长: "continueTime",
        告警时间: "beginTime",
      },
    };
  },
  methods: {
    //重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getListData();
    },
    //获取数据
    getListData() {
      console.log(this.query);
      getAlarmCategoryApi(this.query).then((res) => {
        console.log(res.data);
        this.tableData = res.data;
      });
    },
    Detail(row) {
      console.log(row);
      this.$router.push({ path: "Detail?eventid=" + row.eventid });
    },
    //搜索
    handleQuery() {},
    //表格id样式
    cellStyle({ column, columnIndex }) {
      // 状态列字体颜色
      if (columnIndex === 2 || columnIndex === 6 || columnIndex === 4) {
        return "color: #46a6ff;cursor:pointer;";
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.multiple = !selection.length;
    },
  },
  created() {
    this.getListData();
  },
  filters: {
    //过滤严重性
    getSeverity(val) {
      switch (val) {
        case 0:
          return "未分类";
        case 1:
          return "信息";
        case 2:
          return "警告";
        case 3:
          return "一般严重";
        case 4:
          return "严重";
        case 5:
          return "灾难";
      }
    },
    //持续时间过滤器
    getTime(durationStr) {
      if (!durationStr) {
        return "";
      }
      let days = "";
      let hours = "";
      let minutes = "";
      let seconds = "";
      if (durationStr.indexOf("h") == -1 && durationStr.indexOf("m") == -1) {
        //没有 h 和 m
        durationStr = "0h0m" + durationStr;
      } else if (durationStr.indexOf("h") == -1) {
        //没有 h
        durationStr = "0h" + durationStr;
      } else if (durationStr.indexOf("m") == -1) {
        //没有 m
        durationStr =
          durationStr.split("h")[0] + "h0m" + durationStr.split("h")[1];
      }
      days = Math.floor(durationStr.split("h")[0] / 24) + "天";
      days == "0天" ? (days = "") : null;
      hours = Math.floor(durationStr.split("h")[0] % 24) + "小时";
      days == "" && hours == "0小时" ? (hours = "") : null;
      minutes = durationStr.split("h")[1].split("m")[0] + "分";
      days == "" && hours == "" && minutes == "0分" ? (minutes = "") : null;
      seconds = durationStr.split("m")[1].split("s")[0] + "秒";
      return days + hours + minutes + seconds;
    },
  },
};
</script>

<style lang="scss" scoped>
#AlarmCategory {
  background-color: #ffffff;
  box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 5px;
}
</style>